<template>
    <div class="page-main">
        <div
            class="page-main"
            style="background: #fff; width: 100%"
            v-if="this.isImplant === false"
        >
            <el-menu
                default-active="商家设置"
                :unique-opened="true"
                class="el-menu-vertical-demo"
            >
                <div
                    class="a"
                    v-for="(item, index) in tabListManage"
                    :key="index"
                >
                    <el-submenu
                        :index="item.modeName"
                        v-if="item.child"
                        :collapse="isCollapse"
                    >
                        <template slot="title">
                            <div
                                class="page-main-left-tab-in-icon"
                                :class="item.icon"
                            ></div>
                            <span>{{ item.modeName }}</span>
                        </template>
                        <el-menu-item
                            :index="child.modeName"
                            v-for="(child, idx) in item.child"
                            :key="idx"
                            @click="chooseMode(index, idx)"
                            >{{ child.modeName }}</el-menu-item
                        >
                    </el-submenu>
                    <el-menu-item
                        :index="item.modeName"
                        v-if="!item.child"
                        @click="chooseMode(index)"
                    >
                        <div
                            class="page-main-left-tab-in-icon"
                            :class="item.icon"
                        ></div>
                        <span>{{ item.modeName }}</span>
                    </el-menu-item>
                </div>
            </el-menu>
            <div class="page-main-mid-line"></div>

            <div class="page-main-right-wrapper pos-r">
                <div class="pos-b breadcrumb">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item class="lh30">{{
                            parentMode
                        }}</el-breadcrumb-item>
                        <el-breadcrumb-item class="lh30" v-if="childMode">{{
                            childMode
                        }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="page-main-right-wrapper-content">
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <div class="plr12 bg w100" v-if="this.isImplant === true">
            <el-button
                v-if="$store.state.loginParams.source === '0'"
                type="primary"
                size="small"
                @click="toHome"
                plain
                class="toHome"
                >返回</el-button
            >
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                    v-for="(option, index) in tabListManage"
                    :key="index"
                    :label="option.modeName"
                    :name="option.modePath"
                >
                </el-tab-pane>
            </el-tabs>
            <div class="tab-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script >
export default {
    components: {
    },
    props: {
        underLine: null
    },
    data: function () {
        return {
            ops: {
                speed: 3000,
                bar: {
                    background: '#DCDFE6'
                }
            },
            clickIndex: 0,
            activeName: 'addedServices',
            tabListManage: [
                {
                    modeName: '增值服务',
                    modeValue: '0',
                    modePath: 'addedServices',
                    icon: 'icon-0'
                }, {
                    modeName: '历史订单',
                    modeValue: '1',
                    modePath: 'orderHistory',
                    icon: 'icon-1'
                },
                {
                    modeName: '方案设置',
                    modeValue: '2',
                    modePath: 'schemeSetting',
                    icon: 'icon-1'
                }
            ],
            parentMode: '',
            childMode: '',
            isCollapse: true
        }
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        isImplant () {
            return this.$store.state.isImplant
        },
        serviceMenu () {
            return this.$store.state.serviceMenu
        }
    },
    watch: {
    },
    created () {
        console.log(this.$route)
        this.activeName = this.$route.name
        console.log('aaa' + this.serviceMenu)
        if (this.serviceMenu === 1) {
            this.tabListManage = [
                {
                    modeName: '增值服务商城',
                    modeValue: '0',
                    modePath: 'shopping',
                    icon: 'icon-1'
                },
                {
                    modeName: '我的应用',
                    modeValue: '0',
                    modePath: 'userOrder',
                    icon: 'icon-1'
                },
                {
                    modeName: '历史订单',
                    modeValue: '1',
                    modePath: 'orderHistory',
                    icon: 'icon-1'
                }, {
                    modeName: '历史支付单',
                    modeValue: '0',
                    modePath: 'payHistory',
                    icon: 'icon-1'
                }
            ]
        } else if (this.serviceMenu === 2) {
            this.tabListManage = [
                {
                    modeName: '方案设置',
                    modeValue: '0',
                    modePath: 'schemeSetting',
                    icon: 'icon-1'
                }
            ]
        } else if (this.serviceMenu === 3) {
            this.tabListManage = [
                {
                    modeName: '增值服务',
                    modeValue: '0',
                    modePath: 'addedServices',
                    icon: 'icon-0'
                },
                {
                    modeName: '配置年费',
                    modeValue: '0',
                    modePath: 'setAnnualFee',
                    icon: 'icon-1'
                },
                {
                    modeName: '商家应用',
                    modeValue: '0',
                    modePath: 'userOrder',
                    icon: 'icon-1'
                }
            ]
            this.activeName = 'addedServices'
        } else {
            this.tabListManage = [
                {
                    modeName: '增值服务',
                    modeValue: '0',
                    modePath: 'addedServices',
                    icon: 'icon-0'
                }, {
                    modeName: '历史订单',
                    modeValue: '1',
                    modePath: 'orderHistory',
                    icon: 'icon-1'
                }, {
                    modeName: '历史支付单',
                    modeValue: '0',
                    modePath: 'payHistory',
                    icon: 'icon-1'
                }, {
                    modeName: '方案设置',
                    modeValue: '0',
                    modePath: 'schemeSetting',
                    icon: 'icon-1'
                },
                {
                    modeName: '配置年费',
                    modeValue: '0',
                    modePath: 'setAnnualFee',
                    icon: 'icon-1'
                },
                {
                    modeName: '我的应用',
                    modeValue: '0',
                    modePath: 'userOrder',
                    icon: 'icon-1'
                }
            ]
        }
    },
    methods: {
        toHome () {
            window.parent.postMessage({ page: this.$route.query.page }, '*')
        },
        handleClick (tab, event) {
            console.log(this.activeName)
            // if (this.activeName === 'addedServices') {
            //     this.$router.push({ path: '/mainPage/addedServices' })
            // } else if (this.activeName === 'orderHistory') {
            //     this.$router.push({ path: '/mainPage/orderHistory' })
            // } else if (this.activeName === 'payHistory') {
            //     this.$router.push({ path: '/mainPage/payHistory' })
            // } else if (this.activeName === 'schemeSetting') {
            //     this.$router.push({ path: '/mainPage/schemeSetting' })
            // } else if (this.activeName === 'shopping') {
            //     this.$router.push({ path: '/mainPage/shopping' })
            // } else if (this.activeName === 'userOrder') {
            //     this.$router.push({ path: '/mainPage/userOrder' })
            // } else if (this.activeName === 'setAnnualFee') {
            //     this.$router.push({ path: '/mainPage/setAnnualFee' })
            // } else if (this.activeName === 'adminAddedServices') {
            //     this.$router.push({ path: '/mainPage/adminAddedServices' })
            // }
            this.$router.push({ path: `/mainPage/${this.activeName}` })
        },
        calcIcon (index) {
            // 计算 左侧图标
            let obj = {}
            let icon = 'icon-' + (index + 1)
            let iconGray = 'icon-' + (index + 1) + '-gray'
            if (this.clickIndex === index) {
                obj[icon] = true
            } else {
                obj[iconGray] = true
            }
            return obj
        },
        clickButton (index, item) {
            this.clickIndex = index
        },
        chooseMode (parent, child) {
            // 选择 标签
            this.parentMode = this.tabListManage[parent].modeName
            if (child > -1) {
                this.childMode = this.tabListManage[parent].child[child].modeName
            } else {
                this.childMode = ''
            }
            let url = '/mainPage/' + this.tabListManage[parent].modePath
            if (child > -1) {
                let path = this.tabListManage[parent].child[child].modePath
                url += path.slice(0, 1).toUpperCase() + path.slice(1)
            }
            this.$router.push({
                path: url
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.bg
    background: #fff

.toHome
    position: absolute
    right: 0
    top: 5px
    right: 10px
    z-index: 5

.page-main
    width: 100%
    min-height: calc(100vh - 0px)
    display: flex
    flex-flow: row nowrap
    justify-content: flex-start
    align-content: flex-start
    border-top: 1px solid #f1f0f5

    .page-main-left-tabs
        flex: 0 0 210px
        height: calc(100vh - 0px)
        background: #fff

        .page-main-left-tab-in-icon
            width: 20px
            height: 20px
            display: inline-block
            vertical-align: middle
            margin-right: 20px
            background-size: cover
            transition: all 0.2s linear

    .page-main-mid-line
        flex: 0 0 1px
        min-height: calc(100vh - 0px)
        background: #f1f0f5

    .page-main-other-padding
        flex: 0 0 20px
        min-height: calc(100vh - 0px)
        background: #f1f0f5

    .page-main-right-wrapper
        flex: 1
        overflow-x: hidden
        // min-height: calc(100vh - 65px)
        height: calc(100vh - 60px)
        background: #f1f0f5
        overflow-y: auto
        overflow-x: hidden
        padding: 30px 20px 0
        box-sizing: border-box

        .breadcrumb
            top: 0px

    .page-main-right-wrapper-content
        background: #fff
        min-height: 100%

.el-menu
    border: none

.page-main-left-tabs
    outline: 0

    .icon-0
        background-image: url('/addService/static/pic/icon_add_grey.png')

    .icon-1
        background-image: url('/addService/static/pic/icon_history_grey.png')

    .icon-2
        background-image: url('../../common/pic/icons_8_business/icon_2_gray.png')

    .icon-3
        background-image: url('../../common/pic/icons_8_business/icon_3_gray.png')

    .icon-4
        background-image: url('../../common/pic/icons_8_business/icon_4_gray.png')

    .icon-5
        background-image: url('../../common/pic/icons_8_business/icon_5_gray.png')

    .icon-6
        background-image: url('../../common/pic/icons_8_business/icon_6_gray.png')

    .icon-7
        background-image: url('../../common/pic/icons_8_business/icon_7_gray.png')

.page-main-left-tabs .is-active
    outline: 0

    .icon-0
        background-image: url('/addService/static/pic/icon_add_light.png')

    .icon-1
        background-image: url('/addService/static/pic/icon_history_light.png')

    .icon-2
        background-image: url('../../common/pic/icons_8_business/icon_2.png')

    .icon-3
        background-image: url('../../common/pic/icons_8_business/icon_3.png')

    .icon-4
        background-image: url('../../common/pic/icons_8_business/icon_4.png')

    .icon-5
        background-image: url('../../common/pic/icons_8_business/icon_5.png')

    .icon-6
        background-image: url('../../common/pic/icons_8_business/icon_6.png')

    .icon-7
        background-image: url('../../common/pic/icons_8_business/icon_7.png')

.tab-content
    position: absolute
    top: 54px
    left: 0
    right: 0
    bottom: 0
    overflow-x: hidden
    overflow-y: hidden
</style>
